<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket</title>
    <script src="/scripts/socket.io.js" charset="utf-8"></script>
    <script src="/scripts/client.js" charset="utf-8"></script>
</head>

<body>
    <h1>gp 交流区</h1>
    <div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
    <br />
    <div>
        <input type="text" id="msg" style="width: 200px;">
    </div>
    <button id="submit">提交</button>
    <script>
        document.querySelector('#submit')
            .addEventListener('click', function () {
                var msg = document.querySelector('#msg');
                var content = document.querySelector('#content');
                var msg2 = msg.value;
                socket.send(msg2); // 核心代码，将表单里的数据提交给server端
                content.innerHTML += msg2 + '<br>';
                msg.value = '';
            }, false)
    </script>
</body>

</html>